<template>
  <div class="productSorts" ref="container">
    <div class="header acea-row row-center-wrapper">
      <router-link :to="'/search'" class="acea-row row-between-wrapper input">
        <span class="iconfont icon-sousuo"></span>
        <div class="text">搜索商品信息</div>
      </router-link>
    </div>
    <!-- 左侧导航 -->
    <div class="aside" id="scropt">
      <div
        id="item-wrap"
        class="item acea-row row-center-wrapper"
        :class="index === navActive ? 'font-color-green' : ''"
        v-for="(item, index) in categoryTwos"
        :key="index"
        @click.stop="twoSortTap($event,index)"
      >{{ item.cate_name }}</div>
      <div style="height:1.2rem;"></div>
    </div>
    <!-- 商品列表 -->
    <div class="conter" id="content-wrap">
      <div class="content-wrapper" id="content" v-for="(item, sum)  in categoryTwos" :key="sum">
        <!-- 标题 -->
        <div class="title">
          <div class="left"></div>
          <div class="title-font">{{item.cate_name}}</div>
          <div class="right"></div>
        </div>
        <!-- 更多 -->
        <div v-for="(dataItem, indexItem) in item.children" :key="indexItem">
          <div class="info" @click="handInfo(sum,indexItem)">
            <div class="info-left">{{ dataItem.cate_name }}</div>
            <div class="info-right">
              <div class="info-more">更多</div>
              <div class="info-graph"></div>
            </div>
          </div>
          <div class="con">
            <div class="con-wrap" v-for="(data,index) in dataItem.children" :key="index">
              <img :src="data.pic" alt />
              <div class="con-text">{{data.cate_name}}</div>
            </div>
          </div>
        </div>

        <!-- <div>
          <div class="info">
            <div class="info-left">女士内搭</div>
            <div class="info-right">
              <div class="info-more">更多</div>
              <div class="info-graph"></div>
            </div>
          </div>
          <div class="con">
            <div class="con-wrap" v-for="(data,index) in clothingList" :key="index">
              <img :src="data.img" alt />
              <div class="con-text">{{data.name}}</div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCategory,
  getProducts,
  getProductDetail,
  postCartAdd,
  getCartCount,
  getCartList,
  postCartDel,
  changeCartNum
} from "@api/store";
import ShopCart from "@components/ShopCart";
import ProductAttr from "@components/ProductAttr";
import Loading from "@components/Loading";
import { mapGetters } from "vuex";
import debounce from "lodash.debounce";
import { mul, add } from "@utils/bc";

export default {
  name: "GoodsClass",
  components: {
    ShopCart,
    ProductAttr,
    Loading
  },
  props: {},
  data: function() {
    return {
      navActive: 0,
      time: "",
      y: 0,
      isScort: "",
      scortIndex: 0,
      active: 0,
      category: [],
      dataList: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {}
      ],
      clothingList: [
        {
          name: "连衣裙",
          img: require("@/assets/images/3.1.png")
        },
        {
          name: "连衣裙",
          img: require("@/assets/images/3.1.png")
        },
        {
          name: "连衣裙",
          img: require("@/assets/images/3.1.png")
        },
        {
          name: "连衣裙",
          img: require("@/assets/images/3.1.png")
        },
        {
          name: "连衣裙",
          img: require("@/assets/images/3.1.png")
        },
        {
          name: "男装",
          img: require("@/assets/images/3.2.png")
        }
      ],
      categoryTwos: [
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        },
        {
          cate_name: "数码"
        }
      ],
    };
  },
  computed: mapGetters(["isLogin"]),
  mounted: function() {
    window.addEventListener("scroll", this.onScort, true);
    this.getCategoryPort();
  },
  methods: {
    /**
     * 跳转分类
     */
    handInfo(index,indexItem) {
      this.$router.push(`goodsClassInfo?id=${index}&idItem=${indexItem}`);
    },
    /**
     * 菜单列表
     */
    async getCategoryPort() {
      const data = await getCategory().catch(error => console.error(error));
      this.categoryTwos = data.data;
    },
    /**
     * 滑动事件
     */
    onScort(e) {
      if (!document.querySelector("#scropt")) {
        return;
      }
      const scort = document.querySelector("#scropt").scrollTop;
      this.scortIndex = scort;
      // 内容
      const content = document.querySelectorAll("#content");
      const onScro =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      content.forEach((item, index) => {
        if (
          item.offsetTop - onScro <= 50 &&
          Math.abs(item.offsetTop - onScro) - item.offsetHeight < 50 &&
          Math.abs(Math.abs(item.offsetTop - onScro) - item.offsetHeight) -
            item.offsetHeight <
            50 &&
          item.offsetTop - onScro > 20
        ) {
          const dataElement = document.querySelectorAll("#item-wrap");
          const attr = e.target.getAttribute || "";
          if (this.time === 'attr' + index) {
            return;
          }
          if (!attr) {
            this.navActive = index;
            document
              .querySelector("#scropt")
              .scrollTo(0, parseInt(dataElement[index].offsetTop / 2));
          }
          return;
        }
      });
    },
    /**
     * 菜单栏动画
     */
    menuSort(e, index) {
      const element = e.target || e;
      if (
        this.isScort &&
        this.isScort === "down" &&
        this.scortIndex > parseInt(element.offsetTop / 2)
      ) {
        this.isScort = "";
        return;
      }
      if (
        this.isScort &&
        this.isScort === "up" &&
        this.scortIndex < parseInt(element.offsetTop / 2)
      ) {
        this.isScort = "";
        return;
      }
      setTimeout(() => {
        if (this.scortIndex < parseInt(element.offsetTop / 2)) {
          this.scortIndex += 5;
          document.querySelector("#scropt").scrollTo(0, this.scortIndex);
          this.isScort = "down";
          this.menuSort(e, index);
        } else if (this.scortIndex > parseInt(element.offsetTop / 2)) {
          this.scortIndex -= 5;
          document.querySelector("#scropt").scrollTo(0, this.scortIndex);
          this.isScort = "up";
          this.menuSort(e, index);
        } else {
          return;
        }
      });
    },
    /**
     * 列表
     */
    productSort(index) {
      this.time = 'attr' + index;
      const onScro = document.documentElement || document.body || window;
      const content = document.querySelectorAll("#content");
      onScro.scrollTo(0, parseInt(content[index].offsetTop) - 40);
    },
    /**
     * 左侧菜单栏点击
     */
    twoSortTap: function(e, index) {
      this.menuSort(e, index);
      this.navActive = index;
      this.productSort(index);
    }
  }
};
</script>

<style scoped>
.productSorts .header {
  width: 100%;
  height: 0.96rem;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  border-bottom: 1px solid #f5f5f5;
}
.productSorts .header .input {
  width: 7rem;
  height: 0.6rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
  padding: 0 0.25rem;
}
.productSorts .header .input .iconfont {
  font-size: 0.35rem;
  color: #555;
}
.productSorts .header .input .text {
  font-size: 0.26rem;
  width: 5.97rem;
  color: #999;
}
.productSorts .header .input input::placeholder {
  color: #999;
}
.productSorts .nav {
  padding: 0 0.2rem;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin-top: 0.96rem;
  height: 0.8rem;
  line-height: 0.75rem;
  border-bottom: 0.04rem solid #f5f5f5;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #fff;
}
.productSorts .nav .navScoll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.productSorts .nav .item {
  display: inline-block;
  font-size: 0.26rem;
  color: #898989;
}
.productSorts .nav .item.font-color-green {
  font-size: 0.28rem;
  font-weight: bold;
  border-bottom: 0.04rem solid #00c049;
}
.productSorts .nav .item ~ .item {
  margin-left: 0.46rem;
}
.productSorts .aside {
  position: fixed;
  width: 1.8rem;
  left: 0;
  top: 0.98rem;
  bottom: 0;
  background-color: #f7f7f7;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: all 0.3s;
  overflow-scrolling: touch;
}
.productSorts .aside .item {
  height: 0.98rem;
  width: 100%;
  font-size: 0.26rem;
  color: #424242;
  position: relative;
}
.productSorts .aside .item.font-color-green {
  background-color: #fff;
  width: 100%;
  text-align: center;
  color: #ff8500;
  font-weight: bold;
  font-size: 0.28rem;
}
.productSorts .aside .item.font-color-green::before {
  position: absolute;
  width: 0.08rem;
  height: 0.35rem;
  background-color: rgb(121, 65, 150);
  top: 50%;
  margin-top: -0.175rem;
  left: 0;
  content: "";
}

.productSorts .conter {
  margin: 0.96rem 0 20px 1.8rem;
  padding: 0 10px;
  box-sizing: border-box;
  /* position: fixed; */
  top: 0;
  overflow-y: auto;
}
.productSorts .conter .grade {
  background-color: #fff;
  padding-bottom: 0.28rem;
}
.productSorts .conter .grade .item {
  width: 1.62rem;
  height: 0.48rem;
  background-color: #f1f1f1;
  border-radius: 0.24rem;
  font-size: 0.24rem;
  color: #454545;
  margin: 0.25rem 0 0 0.2rem;
  border: 1px solid #f1f1f1;
}
.productSorts .conter .grade .item img {
  width: 0.11rem;
  height: 0.16rem;
  display: block;
  margin-left: 0.08rem;
}
.productSorts .conter .grade .item.cart-color-green {
  background-color: #f3fff7;
}
.productSorts .conter .list {
  padding: 0 0.2rem 0 0.17rem;
}
.productSorts .conter .list .item {
  margin-bottom: 0.35rem;
  width: 5.33rem;
  position: relative;
}
.productSorts .conter .list .item .pictrue {
  width: 1.58rem;
  height: 1.58rem;
}
.productSorts .conter .list .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem;
}
.productSorts .conter .list .item .text {
  width: 3.55rem;
}
.productSorts .conter .list .item .text .name {
  font-size: 0.3rem;
  color: #222;
  margin-top: 0.05rem;
}
.productSorts .conter .list .item .text .sales {
  font-size: 0.22rem;
  color: #aaa;
  margin-top: 0.08rem;
}
.productSorts .conter .list .item .text .money {
  font-size: 0.28rem;
  margin-top: 0.18rem;
}
.productSorts .conter .list .item .text .money .num {
  font-size: 0.3rem;
}
.productSorts .conter .list .item .cart {
  position: absolute;
  right: 0.2rem;
  bottom: 0.15rem;
}
.productSorts .conter .list .item .cart .cart-num {
  width: 0.5rem;
  text-align: center;
}
.productSorts .conter .list .item .cart .iconfont {
  font-size: 0.45rem;
}
.productSorts .conter .list .item .cart .iconfont.on {
  color: #ddd !important;
}
.productSorts .conter .list .item .cart .iconfont.icon-jian {
  color: #ddd;
}
.productSorts .conter .list .item .specs {
  width: 1rem;
  height: 0.4rem;
  border-radius: 0.2rem;
  font-size: 0.2rem;
  position: absolute;
  right: 0.2rem;
  bottom: 0.15rem;
  color: #fff;
}

.font-color-green {
  color: rgb(121, 65, 150) !important;
}

.left {
  width: 25px;
  height: 1px;
  background: linear-gradient(to left, #000, #fff);
}
.right {
  width: 25px;
  height: 1px;
  background: linear-gradient(to right, #000, #fff);
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.title-font {
  margin: 0 5px;
  font-weight: 700;
  font-size: 17px;
}
.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(235, 235, 235);
  height: 35px;
  margin-top: 20px;
}
.info-left {
  font-weight: 700;
}
.info-right {
  display: flex;
  align-items: center;
}
.info-more {
  font-size: 12px;
  color: rgb(148, 148, 148);
  margin-right: 3px;
}
.info-graph {
  width: 8px;
  height: 8px;
  border-right: 1px solid rgb(148, 148, 148);
  border-bottom: 1px solid rgb(148, 148, 148);
  transform: rotate(-45deg);
}
.con {
  display: flex;
  flex-wrap: wrap;
}
.con-wrap {
  width: 32%;
  margin-right: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 40px;
}

.con-wrap img {
  width: 50px;
  height: 55px;
  margin-bottom: 10px;
}

.con-text {
  color: rgb(97, 97, 97);
  font-size: 12px;
}
.content-wrapper {
  margin-bottom: 20px;
}
</style>

